<template functional>
  <div class="stepList">
    <div class="stepItem" v-for="(item ,i) in props.items" :key="i" :class="index >= (i + 1) ? 'stepActive' : ''">{{item}}</div>
  </div>
</template>

<style lang="scss" scoped>
.stepList {
  display: flex;
  align-items: center;
  height: 50px;
  .stepItem {
    line-height: 50px;
    font-size: 14px;
    color: #fff;
    flex: 1;
    text-align: center;
    position: relative;
    background-color: #ccc;
    -webkit-clip-path: polygon(
      0 0,
      240px 0,
      265px 25px,
      240px 50px,
      0 50px,
      25px 25px
    );
    clip-path: polygon(0 0, 240px 0, 265px 25px, 240px 50px, 0 50px, 25px 25px);
    &:first-child {
      -webkit-clip-path: polygon(0 0, 240px 0, 265px 25px, 240px 50px, 0 50px);
      clip-path: polygon(0 0, 240px 0, 265px 25px, 240px 50px, 0 50px);
    }
    &:last-child {
      -webkit-clip-path: polygon(0 0, 265px 0, 265px 50px, 0 50px, 25px 25px);
      clip-path: polygon(0 0, 265px 0, 265px 50px, 0 50px, 25px 25px);
    }
  }
  .stepActive {
    background: $--color-primary;
  }
}
</style>
